<template>
	<view class="bg-white">
		<view class="flex flex-direction padding-lg" style="min-height: 100vh;">
			<view class="" style="flex: auto">
				<view class="text-xxl" style="margin-top: 160rpx">
					亲，欢迎注册
				</view>
				
				<view class="padding-top-xl">
					<view>
						<uni-data-select placeholder="请选择注册用户类型"
						v-model="value"
						 :localdata="range"
						  @change="change">
						</uni-data-select> 
					</view>
					
					<view>
						<u--input v-model="UserName" type="text" placeholder="请输入用户名" border="bottom">
						</u--input>
					</view>
					
					<view>
						<u--input v-model="phone" type="number" placeholder="请输入手机号" border="bottom">
						</u--input>
					</view>
				
					<view class="margin-top">
						<u-input v-model="code" type="number" placeholder="请输入验证码" border="bottom">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" :seconds="seconds" changeText="X秒重新获取">
								</u-code>
								<u-button @tap="getCode()" :text="tips" type="success" size="mini" color="#fff"
									:customStyle="{color:'#ea3457'}">
								</u-button>
							</template>
						</u-input>
					</view>
				
					<view class="margin-top">
						<u--input v-model="password" password placeholder="请输入密码" border="bottom">
						</u--input>
					</view>
					
					<view class="margin-top">
						<u--input v-model="yqm" placeholder="请输入邀请码（非必填）" border="bottom">
						</u--input>
					</view>
				</view>
				
				<view class="flex justify-end margin-top padding-lr-sm">
					<navigator url="/pages/login/login">去登录</navigator>
				</view>
			
				<view class="flex justify-center login-btn" style="margin-top: 50rpx;">
					<view class="flex justify-center login-btn" style="margin-top: 50rpx;">
						<u-button @click="submit" :disabled="disabled" type="primary" :loading="loading"
							:text="loading ? '' : '确认注册'" :loadingText="loading ? '注册中...' : ''" color="#ea3457" size="large"
							shape="circle">
						</u-button>
					</view>
				</view>
			</view>
			
			<view class="flex-shrink">
				<view class="flex">
					<u-checkbox-group v-model="checkboxValue" size='28rpx'>
						<u-checkbox :name="1" label="我已阅读并同意遵守" activeColor="red"></u-checkbox>
					</u-checkbox-group>
					<text>《用户协议》</text>
				</view>
			</view>
		</view>
		

		<u-no-network></u-no-network>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false, // 等待开关
				phone: '',
				password: '',
				UserName:'',
				checkboxValue: [], //使用手册

				code: '', //验证码
				tips: '',
				seconds: 60,

				yqm: '', //邀请码
				
				value:0,
				range: [
					{ value: 1, text: "教师" },
					//{ value: 2, text: "用户" },
					{ value: 3, text: "机构" },
					{ value: 4, text: "托管" },
				],
			}
		},
		computed: {
			disabled() {
				// 必须输入 密码和验证码 才能点击下一步
				
				if (this.phone && this.code && this.password ) return false
				
				return true
			}
		},
		onLoad(e) {

		},

		methods: {
			change(e){
			            console.log('e:',e);
			        },
			agreement() {
				this.$routerGo('/pages/login/agreement')
			},
			
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(!this.validate()){
					return
				}
				
				//请求数据
				this.$H.post('/SendsmsInfo/',{
					MobilePhone:this.phone,
					Usertype:this.value
				},{
					native:true
				}).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
					// 倒计时
					this.seconds = 60
					let timer = setInterval(()=>{
						if (this.seconds >= 1) {
							this.seconds--
						} else {
							this.seconds = 0
							clearInterval(timer)
						}
					},1000)
				})
			},
			
			// 表单验证
			validate(){
				//手机号正则
				var mPattern = /^1[34578]\d{9}$/; 
				if (!mPattern.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return false
				}
				// ...更多验证
				return true
			},
			
			submit() {
				let url = ""
				let data = ""
				if (this.loading) return
				
				if (this.checkboxValue.length == 0) return this.$toast('请先阅读并同意用户协议')
				
				// 手机验证码登录
				if (!this.validate()) return
				
				if(this.value==0) return this.$toast('请选择注册用户类型')
				
				this.loading = true
				
				// 账号密码注册
				url = '/SavePersonnelInfo/'
				data = {
					Loginname:this.phone,
					UserName:this.UserName,
					Usertype:this.value,
					Pwd:this.password,
					Phonecode:this.code
				}
				
				//return
				//请求数据
				this.$H.post(url,data).then(res => {
					this.loading=false
					console.log(res.code);
					if(res.code==200)
					{
						uni.showToast({
							title: res.msg,
							icon: 'none',
						});
						setTimeout(()=>{
							uni.switchTab({
								url: '/pages/login/login'
							});
						},1000);
						
						this.loading = false
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
						});
					}
					
				}).catch(err=>{
					console.log(err);
					// 登录失败
					this.$toast('注册失败')
					this.loading = false
				})

			},

		}
	}
</script>

<style lang="scss" scoped>

</style>
